<template>
  <el-dialog
    :title="state.title"
    @close="handleClose"
    width="1000"
    v-model="state.visible"
    :before-close="beforeClose"
    :loading="state.loading"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    append-to-body
    destroy-on-close
  >
    <div>
      <yt-crud
        v-bind="options"
        ref="crudRef"
        @onLoad="getData"
        :fun-props="{
          exportBtn: true,
          delBtn: false,
          addBtn: false,
          hide: true,
        }"
        :table-props="{
          selection: false,
          delBtn: false,
          pageHide: true,
          viewBtn: false,
          editBtn: false,
          menu: false,
        }"
        :loading="state.loading"
        :total="state.total"
        v-model:page="state.page"
        v-model:query="state.query"
      >
        <template #menuSlot="scope:any">
          <div class="menu-btn" v-if="scope.row.state === 'Settled'">
            <el-tooltip class="box-item" effect="dark" :content="t('business.ledgerSettleDealer.action.paid')" placement="top">
              <el-button link type="primary" icon="Coin" @click="handlePaid(scope.row)" />
            </el-tooltip>
          </div>
        </template>
        <template #state="scope:any">
          <DictTag :options="LedgerSettleStateEnum" :value="scope.row.state" />
        </template>
        <template #settleTime="scope:any">
          {{scope.row.settleTime || '-'}}
        </template>
        <template #paidTime="scope:any">
          {{scope.row.paidTime ?? '-'}}
        </template>

        <template #name="scope:any">
          <el-tag type="info" effect="light" v-if="scope.row.type == 'Platform'">{{t('enum.ledgerTypeEnum.platform')}}</el-tag>
          <el-tag type="info" effect="light" v-if="scope.row.type == 'Tenant'">{{scope.row.tenantName}}</el-tag>
          <el-tag type="info" effect="light" v-if="scope.row.type == 'Agent'">{{scope.row.agentName}}</el-tag>
          <el-tag type="info" effect="light" v-if="scope.row.type == 'Dealer'">{{scope.row.dealerName}}</el-tag>
        </template>
      </yt-crud>
    </div>

    <LedgerSettleDealerPaid ref="ledgerSettleDealerPaidRef" @success="handleSuccess" />

    <template #footer>
      <el-button @click="handleClose" :loading="state.loading">{{t('crud.closeText')}}</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>

import YtCrud from '@/components/common/yt-crud.vue'
import {IColumn} from '@/components/common/types/tableCommon'
import {ledgerList } from '@/api/business/ledger'
import {useI18n} from 'vue-i18n'
import {ComponentInternalInstance} from 'vue'

import LedgerSettleDealerPaid from './paid.vue'
import {parseTime} from '@/utils/ruoyi'

const { proxy } = getCurrentInstance() as ComponentInternalInstance
const { LedgerSettleStateEnum, LedgerTypeEnum } = toRefs<any>(proxy?.useEnum('ledger_settle_state_enum', 'ledger_type_enum'))

const { t } = useI18n()

const ledgerSettleDealerPaidRef = ref()

const state = reactive({
  visible: false,
  loading: false,
  recharge: {},
  form: {
    loading: false,
  },
  title: t('business.ledgerSettleDealer.action.view'),
  page: {
    pageSize: 30,
    pageNum: 1,
  },
  total: 0,
  query: {},
})

const ledgerSettleDealer = ref<any>({})

const column = ref<IColumn[]>(
  [
    {
      label: t('business.ledgerSettleDealer.tranId'),
      key: 'tranId',
    },
    {
      label: t('business.ledgerSettleDealer.type'),
      key: 'type',
      align: 'center',
      type: 'select',
      search: true,
      componentProps: {
        options: LedgerTypeEnum,
        style: {
          width: '120px'
        }
      },
    },
    {
      label: t('business.ledgerSettleDealer.name'),
      key: 'name',
      type: 'string',
      search: true,
      formHide: false,
      searchLabelWidth: 120,
      slot: true,
      align: 'center',
      colSpan: 22,
    },
    {
      label: t('business.ledgerSettleDealer.amount'),
      key: 'amount',
    },
    {
      label: t('business.ledgerSettleDealer.state'),
      key: 'state',
      slot: true,
    },
    {
      label: t('business.ledgerSettleDealer.settleTime'),
      key: 'settleTime',
      type: 'date',
      slot: true,
    },
    {
      label: t('business.ledgerSettleDealer.paidTime'),
      key: 'paidTime',
      type: 'date',
      slot: true,
    },
  ]
)

const openDialog = (row?: any) => {
  ledgerSettleDealer.value = row
  state.visible = true
}

const handleClose = () => {
  state.visible = false
}

const beforeClose = (done: () => void) => {
  done()
}
defineExpose({
  openDialog,
})

const crudRef = ref()
const data = ref<any[]>([])
const getData = () => {
  state.loading = true
  ledgerList({
    ...state.page,
    ...state.query,
    ...{ ledgerSettleDealerId: ledgerSettleDealer.value.id}
  })
    .then((res) => {
      data.value = res.data.rows
      state.total = res.data.total
    })
    .finally(() => {
      state.loading = false
    })
}

const handlePaid = (row: any) => {
  ledgerSettleDealerPaidRef.value.openDialog(row)
}
const handleSuccess = ()=>{
  getData()
}

const options = reactive({
  ref: 'crudRef',
  data,
  column,
})
</script>
